<template>
	<section class="todoapp">
		<TodoHeader></TodoHeader>
		<TodoMain></TodoMain>
		<TodoFooter v-show="todos.length"></TodoFooter>
	</section>
</template>

<script>
import TodoHeader from '@/components/TodoHeader.vue'
import TodoMain from '@/components/TodoMain.vue'
import TodoFooter from '@/components/TodoFooter.vue'
import { mapState } from 'vuex'
export default {
	name: 'App',
	components: {
		TodoHeader,
		TodoMain,
		TodoFooter,
	},
	computed: {
		...mapState(['todos']),
	},
	methods: {},
	created() {
		this.$store.dispatch('GETTODOS')
	},
}
</script>

<style></style>
